<template>
	<u-popup v-model="show" mode="bottom" border-radius="20" @click="show = false">
		<view class="popView ">
			<view class="title ">
				<view class="logo ">
					<image style="width: 100%;height: 100%;" mode="aspectFit" src="@/static/logo.png"></image>
				</view>
				<text class="text ">{{'登录'+app_name}}</text>
				<u-icon @click="show = false" name="close" size="28" color="#666666"
					style="margin-left: auto;"></u-icon>
			</view>
			<view class="wxauth ">
				<u-button v-if="readShow" type="primary" openType="getPhoneNumber" shape='circle'
					@getphonenumber="getPhoneNumber" :loading="loading"
					:custom-style="{fontSize: '30rpx', color: '#ffffff',width: '630rpx', height: '88rpx',background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%);'}"
					ripple>手机号快捷登录</u-button>
				<u-button v-else type="primary" @click="showNoread" shape='circle' :loading="loading"
					:custom-style="{fontSize: '30rpx', color: '#ffffff',width: '630rpx', height: '88rpx',background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%);'}"
					ripple>手机号快捷登录</u-button>
			</view>
			<view class="otherlogin app-theme fs24" @click="otherLogin">
				其他号码登录/注册
			</view>
			<view class="loginTips ">
				<view class="tipsInLine " @click="readShow = !readShow">
					<view class="icon mr10">
						<u-icon name="checkmark-circle" color="#47A848" v-if="readShow" size="33"></u-icon>
						<text class="check-circle-box" v-else><text class="check-circle"></text></text>
					</view>
					<text class="text c9">我已阅读并同意以下协议</text>
					<text class=" app-theme" @click.stop="openPrivacyContract">《隐私政策》</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		getUrl
	} from "@/utils/login.js";
	import {
		getDefaultAddress
	} from '@/api/address.js'
	import {
		code2Session,
		registerLoginByPhone,
		getInfo,
		getPhone
	} from '@/api/login.js'
	export default {
		props: {
			checkAddress: {
				default: true,
				type: Boolean
			}
		},
		data() {
			return {
				show: false,
				app_name: this.APPTITLE,
				readShow: false,
				code: '',
				openId: '',
				token: '',
				sessionId: '',
				userInfo: {}
			}
		},
		mounted() {},
		methods: {
			login() {
				let that = this
				uni.login({
					provider: "weixin",
					success: (loginRes) => {
						if (loginRes.errMsg === "login:ok") {
							that.code = loginRes.code;
						}
					},
					fail: (res) => {},
				});
				uni.getUserInfo({
					desc: "小程序登录",
					success: async (res) => {
						that.userInfo = res.userInfo
						await that.getCode()
						that.show = true

					},
					fail: (e) => {
						console.log(e)
						this.loading = false

					},
				});
			},
			registerLogin(e) {
				return registerLoginByPhone({
					isWxPhone: true,
					phone: e,
					nickname: this.userInfo.nickName,
					headPhoto: this.userInfo.avatarUrl,
					openId: this.openId,
					unionid: this.unionid,
					uuid: this.uuid,
					flag: this.flag
				}).then(res => {
					if (res.code === 200) {
						this.token = res.data.token
						this.$u.vuex('TOKEN', res.data.token)
						this.$u.vuex('_newUSerCoupon', {
							isNewMemberCoupon: res.data.isNewMemberCoupon,
							memberCouponMoney: res.data.memberCouponMoney || 0
						})

						uni.setStorageSync('token', res.data.token)
						getInfo().then(res => {
							this.$u.vuex('USERINFO', res.data)
							this.$emit('loginSuccess')
							this.show = false
							this.getDefault()
							// 登录成功后
						})
					} else {
						this.$u.toast(res.msg)
					}

				})
			},
			getDefaultAddress() {
				getDefaultAddress().then(res => {
					if (res.code == 200) {
						if (this.checkAddress) {
							uni.navigateTo({
								url: '/pages/addressLocation'
							})
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			getDefault() {
				if (!uni.getStorageSync('token')) return
				if (!this.LOCATION.name) { //缓存中有地址
					this.getDefaultAddress()
				}
			},
			getCode() {
				return code2Session({
					jsCode: this.code
				}).then(e => {
					if (e.code === 200) {
						this.openId = e.data.openid
						this.sessionId = e.data.sessionId
						uni.setStorageSync('openid', e.data.openid)
						this.unionid = e.data.unionid
					}
				})
			},
			showNoread() {
				if (!this.readShow) {
					this.$u.toast('请同意隐私协议')
					return
				}
			},

			getPhoneNumber(e) {
				let that = this
				uni.login({
					success: function(loginRes) {
						that.code = loginRes.code
						that.valueCom = false
						getPhone({
							sessionId: that.sessionId,
							openId: uni.getStorageSync("openid"),
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: that.code
						}).then(res => {
							if (res.code === 200) {
								that.registerLogin(res.data)
								uni.setStorageSync('phone', res.data)

							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					}
				})

			},
			// 校验是否需要弹窗登录组件
			checkLogin() {
				if (!uni.getStorageSync('token')) {
					this.showLogin()
				}

			},
			showLogin() {
				this.login()
			},

			otherLogin() {
				getUrl()
			},
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.padding-save-area {
		padding-bottom: env(safe-area-inset-bottom)
	}

	.hover {
		opacity: .7
	}

	.popView {
		padding: 15px
	}

	.popView .title {
		align-items: center;
		display: flex
	}

	.popView .title .logo {
		border-radius: 50%;
		box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1);
		height: 54.34rpx;
		margin-right: 18.12rpx;
		overflow: hidden;
		width: 54.34rpx
	}

	.popView .title .text {
		font-size: 28.99rpx;
		font-weight: 600
	}

	.popView .wxauth {
		margin: 27rpx 50rpx 0
	}

	.popView .otherlogin {
		margin: 20rpx 0;
		text-align: center;
	}

	.popView .loginTips {
		margin-bottom: 30rpx;
		margin-top: 40rpx
	}

	.popView .loginTips .tipsInLine {
		align-items: center;
		display: flex;
		font-size: 25.36rpx;
		height: 2em;
		justify-content: center
	}

	.popView .loginTips .tipsInLine:active {
		background-color: initial
	}

	.popView .loginTips .text {
		color: #ccc;
		font-size: 25.36rpx
	}

	.popView .loginTips .link {
		color: #77baff;
		font-size: 25.36rpx;
		margin-left: 10.87rpx
	}

	.popView .loginTips .spaceText {
		margin: 0 .5rem
	}

	.check-circle-box {
		display: block;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		border: 1rpx solid rgba(153, 153, 153, 0);
	}

	.check-circle {
		margin: 0 auto;
		display: block;
		width: 26rpx;
		height: 26rpx;
		border: 2rpx solid #D8D8D8;
		border-radius: 50%;
	}
</style>